<template>
    <div>
        <el-menu default-active="0" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item v-for="(item, j) in menus" :key="item.name" :index="j + ''">{{item.name}}</el-menu-item>
        </el-menu>
        <auto-table v-if="tableShow" :tableName="tableName" :headData="headData" :tableData="tableData"></auto-table>
    </div>
</template>

<script>
    import AutoTable from "../../components/AutoTable"
    import API from "../../api/api_statistic"
    export default {
        name: "SurveyAnalyse",
        components: {
            AutoTable
        },
        props: {
          surveyId: {
              type: String
          }
        },
        data() {
            return {
                headData: [],
                tableData: [],
                tableShow: false,
                tableName: "",
                menus: [{
                    name: "反馈量分析",
                    funcName: "getSurveyFeedbackByRootDepartment"
                }, {
                    name: "总得分分析",
                    funcName: "getSurveyAvgScoreByRootDepartment"
                }, {
                    name: "维度得分分析",
                    funcName: "getSurveyDimensionalityScoreByRootDepartment"
                }]
            }
        },
        methods: {
            handleSelect(index) {
                let _that = this;
                _that.resetData();
                const loading = _that.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                _that.tableName = _that.menus[index].name;
                API[_that.menus[index].funcName]({surveyId: _that.surveyId}).then(res => {
                    loading.close();
                    if (!res) {
                        return;
                    }
                    _that.tableShow = true;
                    _that.handleRes(res);
                }).catch(() => {
                    loading.close();
                });
            },
            handleRes(data) {
                let _that = this;
                _that.headData = data.headData;
                _that.tableData = data.tableData;
            },
            resetData() {
                let _that = this;
                _that.tableData = [];
                _that.headData = [];
                _that.tableShow = false;
                _that.tableName = "";
            }
        },
        mounted() {
            let _that = this;
            const loading = _that.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            API[_that.menus[0].funcName]({surveyId: _that.surveyId}).then(res => {
                loading.close();
                if (!res) {
                    return;
                }
                _that.tableShow = true;
                _that.handleRes(res);
            }).catch(() => {
                loading.close();
            });
            _that.tableName = _that.menus[0].name;
        },

    }
</script>

<style scoped>

</style>
